import React, { useState } from 'react';
import { IFormItem, Itype } from '@/base-ui/form';
import http from '@/services/request';
import { Popconfirm, Space, Dropdown, Menu, Button, Select } from 'antd';
import { IToolButton } from '@/base-ui/tool-bar';
import { Input } from 'antd';
import { RightOutlined, UpOutlined } from '@ant-design/icons';

const randomId = () => String(Math.random()).slice(2);
const { Option } = Select;

const { Search } = Input;

const menu = (
  <Menu
    items={[
      {
        key: 0,
        label: <span>详情</span>
      },
      {
        key: 1,
        label: <span>复制</span>
      },
      {
        key: 2,
        label: (
          <Button
            onClick={function () {
              window.print();
            }}
          >
            打印
          </Button>
        )
      }
    ]}
  />
);
/* 搜索区域 */
// //form batch breed grade number weight specification

export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '编号',
    name: 'id',
    placeholder: '请输入编号'
  },
  {
    type: 'input' as Itype,
    label: '批次编号',
    name: 'batch',
    placeholder: '请输入批次编号'
  },
  {
    type: 'input' as Itype,
    label: '品种',
    name: 'breed',
    placeholder: '请输入品种'
  },
  {
    type: 'input' as Itype,
    label: '等级',
    name: 'grade',
    placeholder: '请输入等级'
  },
  {
    type: 'input' as Itype,
    label: '只数',
    name: 'number',
    placeholder: '请输入数量'
  },
  {
    type: 'select' as Itype,
    label: '毛重',
    name: 'weight',
    placeholder: '请选择重量区间',
    options: [
      { label: '默认', value: '' },
      { label: '100kg以下', value: '1' },
      { label: '100kg-500kg', value: '2' },
      { label: '500kg-1000kg', value: '3' },
      { label: '1000kg以上', value: '4' }
    ]
  },

  {
    type: 'input' as Itype,
    label: '规格',
    name: 'specification',
    placeholder: '请输入品种'
  }
];

//高级检索
export const UseSearch = (props: any) => {
  return (
    <Space style={{ float: 'right' }}>
      {props.isMoreSearchShow ? (
        <Button
          type="link"
          size="large"
          onClick={() => {
            props.setisMoreSearchShow(false); props.setsearchMore(false);
          }}
        >
          收起
          <UpOutlined />
        </Button>
      ) : (
        <div>
          <Button
            type="link"
            size="middle"
            onClick={() => {
              props.setisMoreSearchShow(true); props.setsearchMore(true);
            }}
          >
            高级检索
            <RightOutlined style={{ marginLeft: '1px' }} />
          </Button>
        </div>
      )}
    </Space>
  );
};

export const addFormConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '产品名称',
    placeholder: '请输入产品名称'
  },
  {
    type: 'input' as Itype,
    label: '供应商',
    placeholder: '请输入供应商'
  },

  {
    type: 'select' as Itype,
    label: '件数',
    placeholder: '请选择件数区间',
    options: [
      { label: '1000件以下', value: 'value1' },
      { label: '1000-5000件', value: 'value2' },
      { label: '5000-20000件', value: 'value3' },
      { label: '20000件以上', value: 'value4' }
    ]
  },
  {
    type: 'input' as Itype,
    label: '收货商',
    placeholder: '请输入收货商'
  },
  {
    type: 'input' as Itype,
    label: '备注',
    placeholder: '请输入备注'
  }
];

/* 工具栏区域 */

export const SearchSelector = (props: any) => {
  // 默认的查找方式设置为按客户名查找
  const [searchid, setsearchid]: any = useState('批次编号');
  return (
    <div
      style={{
        display: 'inline-block',
        width: '380px',
        marginBottom: 10,
        marginRight: 10,
        float: 'right'
      }}
    >
      <Select
        defaultValue={Options[0].label}
        style={{ width: 100 }}
        defaultActiveFirstOption
        onChange={(value, record) => {
          setsearchid(value);
        }}
      >
        {Options.map((i) => (
          <Option value={i.label} key={i.value} children={null}></Option>
        ))}
      </Select>
      <Search
        placeholder="请输入您要查的数据"
        onSearch={(e) => {
          if (e === '') {
            http.get('/server/dailySlaughter/list/1/10').then((res) => {});
            return;
          }
          switch (searchid) {
            case '批次编号': {
              http(`/server/dailySlaughter/fuzzyGet/${e}`).then((res) => {
                props.dataSource(res.data);
              });
              return;
            }

            case '手机号码': {
              return;
            }
            default: {
              return;
            }
          }
        }}
        style={{ width: '280px' }}
        enterButton
      />
    </div>
  );
};
const Options = [
  { label: '批次编号', value: '1', onClick: (e: any) => {} },
  { label: '手机号码', value: '2', onClick: (e: any) => {} }
];

// 按钮组
export const buttonGroup: IToolButton[] = [
  { type: 'delete', text: '批量删除', isShow: true, onClick: () => {} },
  { type: 'import', text: '导入', isShow: true, onClick: () => {}, id: 9 },
  { type: 'export', text: '导出', isShow: true, onClick: () => {}, id: 10 }
];

/* 表格区域 */

// 表格数据
export const FormDataSource: any = [
  {
    key: '0',
    orderId: randomId(),
    name: '麻辣鸡腿',
    department: 'A养殖场',
    date: '2022-4-25',
    status: '已缴费',
    num: '30',
    price: '300',
    remark: '好吃',
    action: '',
    totalPriceCharged: '9000'
  },
  {
    key: '1',
    orderId: randomId(),
    name: '香辣鸡腿',
    department: 'B养殖场',
    date: '2022-4-25',
    status: '已缴费',
    num: '10',
    price: '300',
    remark: '好吃',
    action: '',
    totalPriceCharged: '3000'
  },
  {
    key: '2',
    orderId: randomId(),
    name: '不辣鸡腿',
    department: 'C养殖场',
    date: '2022-4-25',
    status: '未缴费',
    num: '20',
    price: '290',
    remark: '还行',
    action: '',
    totalPriceCharged: '5800'
  },
  {
    key: '3',
    orderId: randomId(),
    name: '麻辣鸡腿',
    department: 'A养殖场',
    date: '2022-4-25',
    status: '已缴费',
    num: '12',
    price: '300',
    remark: '好辣',
    action: '',
    totalPriceCharged: '3600'
  }
];
// 表格列配置
export const FormColumns: any = [
  {
    title: '订单编号',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },

  {
    title: '客户名',
    dataIndex: 'customerName',
    key: 'customerName'
  },
  {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit'
  },
  {
    title: '件数',
    dataIndex: 'numberOfPieces',
    key: 'numberOfPieces',

  },

  {
    title: '只数',
    dataIndex: 'only',
    key: 'only',

  },
  {
    title: '重量',
    dataIndex: 'weight',
    key: 'weight'
  },
  {
    title: '规格',
    dataIndex: 'specification	',
    key: 'specification	'
  },
  {
    title: '提货人',
    dataIndex: 'pickupPerson',
    key: 'pickupPerson'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 150,
    render: (_: any, record: { key: React.Key }) => (
      <Space>
        <a>编辑</a>
        <Popconfirm title="确定删除?" okText="确认" cancelText="取消">
          <a style={{ color: '#ff4d4f' }}>删除</a>
        </Popconfirm>
        <Dropdown overlay={menu}>
          <a onClick={(e) => e.preventDefault()}>···</a>
        </Dropdown>
      </Space>
    ),
    fixed: 'right'
  }
];

//复选框的接口
export interface DataType {
  key: React.Key;
  id: string;
  name: string;
  age: number;
  address: string;
}
